<template>
  <div class="add-form">
    <el-dialog :title="showTitle" :visible="showDialog" @close="btnCancel">
      <el-form
        ref="addEmployee"
        label-position="left"
        label-width="150px"
        style="width: 80%; margin-left:10px;"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="formData.shortName" />
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="formData.company" />
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-select
            v-model="formData.province"
            class="filter-item"
            style="width: 130px;"
            filterable
          >
            <el-option v-for="(item, index) in citySelect.province" :key="index" :label="item" :value="item" />
          </el-select>
          <el-select
            v-model="formData.city"
            class="filter-item"
            style="width: 130px;"
            filterable
          >
            <el-option v-for="(item, index) in citySelect.cityDate" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="formData.tags" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="formData.remarks"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" @click="btnOK">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addCompanys, getDetails, editDetails } from '@/api/list'
import { provinces, citys } from '@/api/citys'
const defaultItem = {
  shortName: '',
  company: '',
  tags: '',
  city: '',
  province: '',
  remarks: '',
  isFamous: ''
}
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userId: '',
      Data: [],
      formData: {
        ...defaultItem
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      // 表单验证
      rules: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑用户' : '新增用户'
    }
  },
  watch: {
    'formData.province': {
      async handler(newValue) {
        const res = await citys(newValue)
        // console.log(res)
        this.citySelect.cityDate = res
      },
      immediate: true
    }
  },
  created() {
    this.getCityData()
  },
  methods: {
    // 获取省
    getCityData: function() {
      this.citySelect.province = provinces()
    },
    // handleProvince: function(e) {
    //   this.citySelect.cityDate = citys(e)
    //   this.formData.city = this.citySelect.cityDate[0]
    // },
    async btnOK() {
      try {
        await this.$refs.addEmployee.validate()
        if (this.formData.id) {
          console.log(this.formData.id)
          this.formData.isFamous = true
          await editDetails(this.formData)
        } else {
          this.formData.isFamous = true
          await addCompanys(this.formData)
        }
        // console.log(this.$parent)
        this.$emit('add')
        // this.$parent.getCompanys()
        this.$parent.showDialog = false
      } catch (err) {
        console.log(err)
      }
    },
    btnCancel() {
      // 重置原来的数据
      this.formData = {
        ...defaultItem
      }
      this.$refs.addEmployee.resetFields() // 重置校验结果
      this.$emit('update:showDialog', false)
    },
    async getDetails(id) {
      // console.log(id)
      const { data } = await getDetails(id)
      this.formData = data
    }
  }
}
</script>

<style>

</style>
